// in min width
$size-xxs: 0px;
$size-xs: 380px;
$size-xssm: 480px;
$size-xsm: 590px;
$size-sm: 768px;
$size-md: 992px;
$size-lg: 1200px;
$size-xl: 1920px;

@mixin vue-hidden {
  display: none !important;
}

.hidden-xxs-only {
  @media screen and (max-width: $size-xs) {
    @include vue-hidden();
  }
}

.hidden-less-sm {
  @media screen and (max-width: $size-sm) {
    @include vue-hidden();
  }
}

.hidden-more-sm {
  @media screen and (min-width: $size-sm) {
    @include vue-hidden();
  }
}

.hidden-less-xsm {
  @media screen and (max-width: $size-xsm) {
    @include vue-hidden();
  }
}

dl.info-list-dl {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 0.8rem;

  dt {
    grid-column-start: 1;
    font-weight: bold;
    text-align: justify;

    &::after {
      content: ':';
    }
  }

  dd {
    grid-column-start: 2;
  }
}
